Syntax

As an example, let's suppose we have a favouriteColor held in state, and we want to make it available to every component in the application, using context.

There are two steps: providing and consuming.

In Step 1, we use a provider to make a particular value available through context. We do this by wrapping our application in a Provider component, which we get from React when creating a context.

Here's what it looks like:

// App.js
import React from 'react';

import Home from './Home';

// Create a new context
export const FavouriteColorContext = React.createContext();

function App() {
  const [
    favouriteColor,
    setFavouriteColor
  ] = React.useState('#EBDEFB');

  // Wrap everything `App` would normally render inside
  // a Provider, and pass our `favouriteColor` state
  // variable as the value:
  return (
    <FavouriteColorContext.Provider value={favouriteColor}>
      <Home />
    </FavouriteColorContext.Provider>
  );
}

export default App;

First, we create a “context” with the React.createContext() method.

A “context” can be thought of as a channel, a radio frequency we can use to broadcast data down through the app. It's the vehicle we use to deliver a value from one spot to another.

More concretely, FavouriteColorContext is a plain ol’ JavaScript object. It includes a bunch of stuff that React uses internally. It also includes a Provider component for us to render.

When we render <FavouriteColorContext.Provider>, we start broadcasting a value, making it available to any descendant component. In this case, we're broadcasting the favouriteColor state variable.

Often, Provider components are kept at the very top of our applications, so that their broadcast can reach anywhere in the app.

When we want to access this value, we do so like this:

import { FavouriteColorContext } from './App';

function Sidebar() {
  const favouriteColor = React.useContext(FavouriteColorContext);
}

useContext is a hook designed to “plug in” to a particular context and pluck out its current value. In this case, we're handing it the FavouriteColorContext object we created in App, and it's grabbing the favouriteColor value that was funneled through.

To extend the channel/frequency analogy, useContext is like a radio. By passing it the FavouriteColorContext value, we're tuning this radio to the correct frequency, and the favouriteColor music starts playing.

Here's a sandbox that implements this pattern. Take a few minutes and poke around, getting a feel for how it's set up and how it works!

In the example above, the favouriteColor state variable is being passed through context as a read-only value. There is no way to change that value.

What if we wanted to allow some descendant to be able to change the color?

We can solve for this by passing the setter function through context as well. This is similar to the pattern we learned in the Lifting State Up lesson.

Here's an updated sandbox. Notice that the Sidebar component now uses both the current state value and the setter function, to allow the user to change the sidebar's color:

In practice, we almost always pass an object through context, since this allows us to package up multiple values together.

And so, here's the basic formula:

1. Create a new context with React.createContext.
2. Use the Provider component, from that context, to wrap around the application. Pass it a bundle of values that you need in other parts of the app.
3. Pluck the data you need from context, with the useContext hook.

In the next lesson, we'll get some practice!